import React, { PureComponent } from 'react'
import { FlatList, TouchableOpacity, Modal, StyleSheet, View, Image, Text } from 'react-native'
import { screen, system } from '../../../../common'
import SeeMoreGroupPurchaseItem from './SeeMoreGroupPurchaseItem'

type Props = {
    show: boolean,
}
type State = {
    showView: boolean,
}
const SeeMoreGroupPurchaseInfo = [
    { ownerName: '姬祥', ownerImage: require('../../../../img/home/icon_homepage_default.png'), needMemberCount: '2', endTime: '1546271999000', },
    { ownerName: '12345678945', ownerImage: require('../../../../img/home/icon_homepage_entertainment_category.png'), needMemberCount: '2', endTime: '1546271999000', },
    { ownerName: '老李', ownerImage: require('../../../../img/home/icon_homepage_food_category.png'), needMemberCount: '2', endTime: '1546271999000', },
    { ownerName: '小魏', ownerImage: require('../../../../img/home/icon_homepage_foottreat_category.png'), needMemberCount: '2', endTime: '1546271999000', },
    { ownerName: '老湛', ownerImage: require('../../../../img/home/icon_homepage_hotel_category.png'), needMemberCount: '2', endTime: '1546271999000', },
    { ownerName: '小许', ownerImage: require('../../../../img/home/icon_homepage_ktv_category.png'), needMemberCount: '2', endTime: '1546271999000', },
    { ownerName: '老高', ownerImage: require('../../../../img/home/icon_homepage_life_service_category.png'), needMemberCount: '2', endTime: '1546271999000', },
    { ownerName: '老许', ownerImage: require('../../../../img/home/icon_homepage_movie_category.png'), needMemberCount: '2', endTime: '1546271999000', },
    { ownerName: '老王', ownerImage: require('../../../../img/home/icon_homepage_shopping_category.png'), needMemberCount: '2', endTime: '1546271999000', },
    { ownerName: '老刘', ownerImage: require('../../../../img/home/icon_homepage_beauty_category.png'), needMemberCount: '2', endTime: '1546271999000', },
    { ownerName: '老张', ownerImage: require('../../../../img/home/icon_homepage_default.png'), needMemberCount: '2', endTime: '1546271999000', },
]
class SeeMoreGroupPurchase extends PureComponent<Props, State>{

    constructor(props: Object) {
        super(props)

        this.state = {
            showView: false
        }
    }

    //更改showView的值
    _setModalVisible() {
        let isShow = this.state.showView;
        this.setState({
            showView: !isShow,
        })

    }

    renderModal = (info: Object) => {
        return (
            <SeeMoreGroupPurchaseItem
                info={info.item}
            />
        )
    }

    render() {
        let isShowView = this.state.showView != this.props.show
        return (
            <Modal
                animationType='slide'
                transparent={true}
                visible={isShowView}
                onShow={() => { }}
                onRequestClose={() => { }}>
                {/*整个弹框的样式，包括可见和不可见得部分*/}
                <View style={styles.container}>
                    {/*弹框可见部分的样式*/}
                    <View style={styles.moadlStyle}>
                        {/*主标题和叉号的样式(头样式)*/}
                        <View style={styles.headStyle}>
                            {/*主标题的样式*/}
                            <Text style={styles.titleStyle}>
                                正在拼单
                            </Text>
                            <View flex={1} />
                            {/*叉号的样式*/}
                            <TouchableOpacity
                                style={{ alignSelf: 'flex-start', }}
                                onPress={() => {
                                    this._setModalVisible()
                                }}
                            >
                                <Text style={styles.exitStyle}>×</Text>
                            </TouchableOpacity>
                        </View>
                        {/*弹框list部分样式*/}
                        <View style={styles.listStyle}>
                            <FlatList
                                data={SeeMoreGroupPurchaseInfo}
                                renderItem={this.renderModal}
                            />
                        </View>
                        <View flex={1} />
                    </View>
                </View>
            </Modal>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
    },
    moadlStyle: {
        // marginLeft: 70,
        // marginRight: 70,
        backgroundColor: 'white',
        // alignSelf: 'stretch',
        justifyContent: 'center',
        borderRadius: 10,
        borderWidth: 0.5,
        borderColor: '#ccc',
        alignItems: 'center',
        height: screen.height * 0.7,
        width: screen.width * 0.8,
    },
    headStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        // width: screen.width - 140,
        height: screen.height * 0.06,
        marginTop: screen.height/80,
        marginBottom: screen.height/80,
        // backgroundColor: 'yellow',
    },
    titleStyle: {
        fontSize: 25,
        // fontWeight: 'bold',
        // alignItems: 'center',
        // justifyContent: 'center',
        //width: (screen.width - 140) * 9 / 10,
        // backgroundColor: 'red',
        marginLeft: screen.width * 0.32,
        color:'black'
    },
    exitStyle: {
        //marginLeft: 10,
        marginRight: screen.width/28,
        //marginTop: 5,
        alignSelf: 'flex-start',
        // width: screen.width * 0.04,
        // height: screen.width * 0.04,
        // backgroundColor: 'blue',
        fontSize: 40,
        fontWeight: 'bold',
        color:'black'

    },
    listStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        height: screen.height * 0.65,
    },
})
export default SeeMoreGroupPurchase